<template>
  <div id="app">
    <!-- 使用transition组件包裹需要动画的元素 -->
    <transition name="slide">
      <nav class="navbar">
        <div class="logo">
          <img src="./assets/huhalogo.png" class="logo-img" alt="logo" />
          <div class="title">开发工具箱</div>
          <!-- <div class="subtitle"> HUHAToolBox·Web</div> -->
        </div>
      </nav>
    </transition>
    <div class="container" :class="{ 'height-120': heightReset }">
      <!-- 默认展示的边栏 -->
      <div class="sidebar" v-show="showSidebar">
        <div style="text-align: center;">
          <img src="./assets/icons/mtileft.png" class="icon-img" @click="closeSidebar">
        </div>
        <ul v-if="showSidebar">
          <li v-for="(tool, index) in tools" :key="index" :class="{ active: currentIndex === index }"
            @click="selectTool(index)">
            <img :src="tool.icon" class="toolicon-img"><span class="tool-text">{{ tool.name }}</span>
          </li>
        </ul>

      </div>
      <!-- 默认隐藏的边栏 -->
      <div class="sidebar-close" v-if="!showSidebar">
        <div style="text-align: center;">
          <img src="./assets/icons/mtiright.png" class="icon-img" @click="openSidebar">
        </div>
        <ul>
          <li v-for="(tool, index) in tools" :key="index" :class="{ active: currentIndex === index }"
            @click="selectTool(index)">
            <img :src="tool.icon" class="toolicon-img">
          </li>
        </ul>
      </div>
      <div class="content">
        <component :is="currentComponent"></component>
      </div>
    </div>
  </div>
</template>

<script>
// 导入组件
import UUIDGenerator from './components/UuidGenerator.vue';
import IDCardGenerator from './components/IDCardGenerator.vue';
import OrgCodeGenerator from './components/OrgCodeGenerator.vue';
import InSQLGenerator from './components/InSQLGenerator.vue';
import JSONFormatter from './components/JSONFormatter.vue';
import XmlFormatter from './components/XmlFormatter.vue';
import BaseToast from './components/BaseToast.vue';

export default {
  name: 'App',
  // 注册组件
  components: {
    UUIDGenerator,
    IDCardGenerator,
    OrgCodeGenerator,
    InSQLGenerator,
    JSONFormatter,
    XmlFormatter,
    BaseToast,
  },
  data() {
    return {
      currentIndex: 0,
      tools: [
        { name: 'UUID 生成器', component: 'UUIDGenerator', hidesidebar: false, icon: require('@/assets/icons/uuid.png') },
        { name: '身份证号生成器', component: 'IDCardGenerator', hidesidebar: false, icon: require('@/assets/icons/idcard.png') },
        { name: '统一社会信用代码', component: 'OrgCodeGenerator', hidesidebar: false, icon: require('@/assets/icons/org.png') },
        { name: 'in( ) SQL生成器', component: 'InSQLGenerator', hidesidebar: false, icon: require('@/assets/icons/sql.png') },
        { name: 'JSON 格式化工具', component: 'JSONFormatter', hidesidebar: true, icon: require('@/assets/icons/JSON.png') },
        { name: 'XML 格式化工具', component: 'XmlFormatter', hidesidebar: true, icon: require('@/assets/icons/XML.png') },
      ],
      currentComponent: 'UUIDGenerator',
      showSidebar: true,
      heightReset: false,
    };
  },
  methods: {
    // 选择工具
    selectTool(index) {
      this.currentIndex = index;
      this.currentComponent = this.tools[index].component;
      if (this.tools[index].hidesidebar) {
        this.closeSidebar()
      }
      else {
        this.openSidebar()
      }
      if(this.currentComponent == 'JSONFormatter' || this.currentComponent == 'XmlFormatter'){
        this.heightReset = true;
      }
      else{
        this.heightReset = false;
      }
    },
    // 显示提示框
    showToast(message, isError, isSuccess) {
      this.toastMessage = message;
      this.toastIsError = isError;
      this.toastIsSuccess = isSuccess;
    },
    // 关闭侧边栏
    closeSidebar() {
      this.showSidebar = false;
    },
    // 打开侧边栏
    openSidebar() {
      this.showSidebar = true;
    },
  },
};

</script>

<style>
/* 仿苹果风格的样式 */
body {
  font-family: 'Helvetica Neue', sans-serif;
  color: #333;
  background-color: #f5f5f5;
}

.navbar {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  height: 50px;
}

.title {
  font-size: 24px;
  margin: 0;
}

.container {
  display: flex;
  margin: 15px;
}

.height-120 {
  height: calc(100vh - 120px);
}

.sidebar {
  width: 200px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

.sidebar ul,
.sidebar-close ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li,
.sidebar-close li {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
}

.sidebar-close li{
  justify-content: center; /* 水平居中 */
}

.sidebar li:hover,
.sidebar .active,
.sidebar-close li:hover,
.sidebar-close .active {
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
}

.sidebar-close {
  width: 60px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  text-align: center;
}


.content {
  flex-grow: 1;
  padding: 1px;
  background-color: #f5f5f5;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  margin-left: 10px;
  border-radius: 20px;
  width: calc(100% - 210px);
}

.logo {
  display: flex;
}

.title {
  color: #000000;
  font-size: 24px;
  font-weight: bolder;
  margin-top: 10px;
  margin-left: 20px;
}

.subtitle {
  font-size: 16px;
  color: #000000;
  margin-top: 10px;
  margin-left: 10px;
  margin-top: 30px;
}

.logo-img {
  width: 145px;
  height: 50px;
}

.icon-img {
  width: 15px;
  height: 15px;
}

.toolicon-img {
  width: 25px;
  height: 25px;
}

.tool-text{
  margin-left: 20px;
}

/* 定义进入和离开时的动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 定义进入和离开时的动画效果 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.4s;
}

.slide-enter-from {
  transform: translateY(-100%);
}

.slide-leave-to {
  transform: translateY(-100%);
}

/* 定义进入和离开时的动画效果 */
.slidesidebar-enter-active,
.slidesidebar-leave-active {
  transition: transform 0.4s;
}

.slidesidebar-enter-from {
  transform: translateX(-100%);
}

.slidesidebar-leave-to {
  transform: translateX(-100%);
}

/* 定义进入和离开时的动画效果 */
.closeslidesidebar-enter-active,
.closeslidesidebar-leave-active {
  transition: transform 0.4s;
}

.closeslidesidebar-enter-from {
  transform: translateX(100%);
}

.closeslidesidebar-leave-to {
  transform: translateX(-100%);
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>